<template>
  <!-- 话题详情页 -->
  <view>
    <image
      :src="info.titlepic"
      style="width: 100%; height: 300rpx; filter: blur(1px)"
      mode="aspectFill"
    ></image>

    <view class="detail-top pd" style="padding-bottom: 20rpx">
      <view class="flex">
        <image
          class="border"
          :src="info.titlepic"
          mode="aspectFill"
          lazy-load="true"
          style="
            width: 150rpx;
            height: 150rpx;
            margin-top: -75rpx;
            margin-right: 20rpx;
          "
        >
        </image>
        <text># {{ info.title }} #</text>
      </view>
      <view class="color-gray" style="margin: 20rpx 0">
        <text class="mr"> 动态：{{ info.post_count }} </text>
        <text>今日: {{ info.todaypost_count }}</text>
      </view>
      <view class="color-gray"> {{ info.desc }} </view>
    </view>

    <!-- <template v-if="dataList.length !== 0"> -->
    <block v-for="(item, index) in dataList" :key="index">
      <view class="divBg"> </view>

      <userListVue
        @doSupport="doSupport"
        :item="item"
        :index="index"
      ></userListVue>
    </block>
    <view class="loading" v-if="loadingbuttom">
      {{ loadingbuttom }}
    </view>
    <!-- </template> -->
    <!-- <template v-else> <noDate></noDate> </template> -->
  </view>
</template>

<script>
import userListVue from "@/components/common/user-list.vue";
import noDate from "@/components/common/noDate.vue";
import { getTopicDetail } from "@/api/api";
export default {
  components: {
    userListVue,
    noDate,
  },
  data() {
    return {
      info: {},
      dataList: [],
      page: 1,
      loadingbuttom: "",
    };
  },
  methods: {
    async getDate() {
      let res = await getTopicDetail(this.info.id, this.page);

      // console.log(res);
      let list = res.list.map((item) => {
        return {
          userpic: item.user.userpic,
          id: item.id,
          user_id: item.user_id,
          title: item.title,
          username: item.user.username,
          newstime: item.create_time,
          isFollow: item.user.fens.length,
          support: {
            type:
              item.support.length > 0
                ? item.support[0].type === 0
                  ? "support"
                  : "unsupport"
                : "",
            support_count: item.ding_count,
            unsupport_count: item.cai_count,
          },
          comment_count: item.comment_count,
          share_num: item.sharenum,
          titlepic: item.titlepic,
        };
      });
      this.dataList = this.page === 1 ? list : [...this.dataList, ...list];
    },
    // 上拉加载
    loading(index) {
      this.loadingbuttom = "加载中";
      this.page++;
      this.getDate();
    },
    // 关注功能
    // 关注功能
    follow(user_id) {
      console.log(user_id);
      // 遍历全部的对象 然后如果是id一样的话就把他的关注变成true
      this.dataList.forEach((item) => {
        if (item.user_id === user_id) {
          item.isFollow = true;
        }
      });
      uni.showToast({ title: "关注成功" });
    },
    // 点赞 踩功能
    // 点赞
    doSupport(type) {
      console.log(type);
      this.dataList.forEach((item) => {
        // console.log(item);
        if (item.id === type.id) {
          // 之前没有操作过
          if (item.support.type === "") {
            item.support[type.type + "_count"]++;
          } else if (
            item.support.type === "support" &&
            type.type === "unsupport"
          ) {
            console.log("顶", item.support.support_count);
            // 顶 - 1
            item.support.support_count--;
            // 踩 + 1
            item.support.unsupport_count++;
          } else if (
            item.support.type === "unsupport" &&
            type.type === "support"
          ) {
            // 之前踩了
            // 顶 + 1
            console.log("不执行", item.support.support_count);
            if (item.support.support_count === -1) {
              item.support.support_count = 0;
            }
            item.support.support_count++;
            // 踩 - 1
            item.support.unsupport_count--;
          }
          item.support.type = type.type;
        }
      });
    },
  },

  onLoad(e) {
    this.info = JSON.parse(e.data);
    console.log(JSON.parse(e.data));
    // this.getList();
    this.getDate();
    uni.setNavigationBarTitle({
      title: this.info.title,
    });
    // 监听自定义事件
    uni.$on("updateFollowOrSupport", (e) => {
      switch (e.type) {
        case "follow": // 关注
          this.follow(e.user_id);
          break;
        case "support": // 顶踩
          this.doSupport(e.data);
          break;
      }
    });
  },
  onReachBottom() {
    console.log("底部");
    this.loading();
  },
};
</script>

<style></style>
